import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'package:state_flutter/components/Tabs/tabs.dart';

class Login extends StatefulWidget {
  Login({Key key}) : super(key: key);

  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LoginBody(),
    );
  }
}


class LoginBody extends StatefulWidget {
  LoginBody({Key key}) : super(key: key);

  @override
  _LoginBodyState createState() => _LoginBodyState();
}

class _LoginBodyState extends State<LoginBody> {
  
  Map userInfo = {
    "username": '',
    "password": ''
  };
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      padding: EdgeInsets.fromLTRB(0, 50, 0, 0),
      decoration: BoxDecoration(color: Colors.white),
      child: Column(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 100.0,
            margin: EdgeInsets.only(bottom: 10),
            child: Image.asset(
              'lib/common/images/2.0x/02.jpg'
            ),
          ),
          Container(
            width: 250.0,
            height: 40.0,
            padding: EdgeInsets.only(left: 10, right: 10),
            margin: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Color.fromRGBO(224, 224, 230, 1)
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(  
                    onChanged: (val){
                      setState(() {
                        this.userInfo['username'] = val;
                      });
                    },
                    decoration: InputDecoration(
                      icon: Icon(Icons.supervised_user_circle, color: Colors.white),
                      hintText: '账号',
                      border: InputBorder.none
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: 250.0,
            height: 40.0,
            padding: EdgeInsets.only(left: 10, right: 10),
            margin: EdgeInsets.only(bottom: 10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Color.fromRGBO(224, 224, 230, 1)
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    obscureText: true,
                    onChanged: (val){
                      setState(() {
                        this.userInfo['password'] = val;
                      });
                    },
                    decoration: InputDecoration(
                      icon: Icon(Icons.remove_red_eye, color: Colors.white),
                      hintText: '密码',
                      border: InputBorder.none
                    ),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: 50.0,
            height: 50.0,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Color(0xFFfbab66), Color(0xFFf7418c)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter
              ),
              
              borderRadius: BorderRadius.circular(25)
            ),
            child: IconButton(
              icon: Icon(Icons.navigate_next, color: Colors.white,),
              onPressed: (){
                //替换路由
                // Navigator.of(context).pushReplacementNamed('/');
                //返回到根路由
                // Navigator.of(context).pop();
                print(this.userInfo);
                Navigator.of(context).pushAndRemoveUntil(
                  new MaterialPageRoute(
                    builder: (context) => new Tabs()
                  ),
                  (route) => route == null
                );
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: Stack(
              children: <Widget>[
                Positioned(
                  bottom: 0,
                  left: 0,
                  right: 0,
                  height: 80.0,
                  child: Column(
                    children: <Widget>[
                      RichText(
                        textAlign: TextAlign.center,
                        text: TextSpan(
                          style: TextStyle(
                            color: Colors.black45,
                            height: 2.5,
                            fontSize: 12
                          ),
                          children: <TextSpan>[
                            TextSpan(
                              text: '忘记密码',
                              style: TextStyle(
                                color: Colors.black
                              ),
                              recognizer: TapGestureRecognizer()..onTap = () {
                                print('忘记密码');
                              }
                            ),
                            TextSpan(
                              text: '       |       ',
                            ),
                            TextSpan(
                              text: '用户注册',
                              style: TextStyle(
                                color: Colors.black
                              ),
                              recognizer: TapGestureRecognizer()..onTap = () {
                                Navigator.pushNamed(context, '/register');
                              }
                            ),
                          ]
                        ),
                      ),
                      RichText(
                        textAlign: TextAlign.center,
                        text: TextSpan(
                          style: TextStyle(
                            color: Colors.black45,
                            height: 2.5,
                            fontSize: 12
                          ),
                          children: <TextSpan>[
                            TextSpan(
                              text: '登录即代表阅读并同意'
                            ),
                            TextSpan(
                              text: '服务协议',
                              style: TextStyle(
                                color: Colors.black
                              ),
                              recognizer: TapGestureRecognizer()..onTap = () async {
                                print('服务协议');
                              }
                            )
                          ]
                        ),
                      ),
                    ],
                  ) 
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}